import { TabsProps as Props, Tabs as TabRoot, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { cn } from '@/utils/css'
import { cva } from 'class-variance-authority'
import React from 'react'

type Item = {
  label: React.ReactNode
  value: string
}

interface TabsProps extends Props {
  options: Item[]
  variant?: 'default' | 'line' | 'switch' | 'arrow'
  className?: string
  tabsClass?: string
  triggerClass?: string
}

const tabsVariants = cva('data-[orientation=vertical]:w-full', {
  variants: {
    variant: {
      default: '',
      line: "relative  h-full  px-0 pb-3 text-base font-semibold  text-foreground data-[state=active]:border-zg-primary data-[state=active]:text-zg-primary data-[state=active]:shadow-none data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:w-full data-[state=active]:after:h-[1px]  data-[state=active]:after:bg-zg-primary data-[state=active]:after:content-['']",
      switch:
        "px-0 relative text-base font-semibold text-foreground data-[state=active]:border-zg-primary data-[state=active]:text-zg-primary data-[state=active]:shadow-none data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:w-full data-[state=active]:after:h-[2px]  data-[state=active]:after:bg-zg-primary data-[state=active]:after:content-[''] data-[state=active]:after:left-1/2 data-[state=active]:after:w-[30px] data-[state=active]:after:-translate-x-1/2",
      arrow:
        'flex-1 h-full rounded-none ring-0 bg-arrow data-[state=active]:bg-zg-primary data-[state=active]:text-background data-[state=active]:shadow-0 text-lg'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
})

const tabsListVariants = cva('data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-auto', {
  variants: {
    variant: {
      default: '',
      line: 'h-auto p-0 space-x-10 bg-transparent w-full rounded-none justify-start  data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r data-[orientation=vertical]:space-x-0',
      switch: 'bg-transparent space-x-10 data-[orientation=vertical]:space-x-0',
      arrow: 'flex p-0 h-16 rounded-none text-foreground bg-zg-primary-normal '
    }
  },
  defaultVariants: {
    variant: 'default'
  }
})

function Tabs(props: TabsProps) {
  const { triggerClass, tabsClass, options, variant, ...rest } = props

  return (
    <TabRoot {...rest}>
      <TabsList className={cn(tabsListVariants({ variant }), tabsClass)}>
        {options.map(item => (
          <TabsTrigger value={item.value} key={item.value} className={cn(tabsVariants({ variant }), triggerClass)}>
            {item.label}
          </TabsTrigger>
        ))}
      </TabsList>
    </TabRoot>
  )
}

export { Tabs }

export type { TabsProps }
